/* eslint-disable no-const-assign */
/* eslint-disable react/display-name */
import React from 'react'
import { Link } from 'dva/router'
import { connect } from 'dva'
import { Table, Input, Select, Button, Pagination, Modal, Tag, message, Divider } from 'antd'
import styles from './EmployeeAcount.less'
import PropTypes from 'prop-types'
import gql from 'graphql-tag'
import { GQL } from '../../components/GQL/index'
import Header from '../../components/Header/index'

const Option = Select.Option
const headerData = {
  title: '员工资料',
  hasPopover: true,
  popoverContent: <div>
    <p> 1、账号权限分为【数据权限】和【功能权限】<br />
    &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;数据权限是指某个账号可以看到那些地区的客户，那些客户<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;功能权限是指后台所有功能入口的可见性、可编辑、可惯性 </p>
    <p>2、首先要先在角色权限模块下创建功能权限分组，比如：业务员角色，仓库管理员角色，财务角色。然后账号关联 <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;某个角色，就拥有该角色下的所有功能权限 </p>
    <p> 3、每个员工账号生成后，会自动生成对应唯一的邀请码，新客户注册系统时，可以选择是否填写邀请码。当新客户注册时，<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;输入某个内部员工的邀请，系统会记录这个关联性，表示可能是由这个内部员工通过自己的宣传带来的新客户 <br />
      <a href='#'>查看更多帮助</a></p>
  </div>,
  hasSubNav: true,
  subNavItem: [
    {
      title: '首页',
      link: true
    },
    {
      title: '系统',
      link: false
    },
    {
      title: '员工管理',
      link: true
    }
  ]
}
const Ban = ({ record, handleStaff, refetch, loading }) => {
  return <Button loading={loading} onClick={() => ban(record, handleStaff, refetch)}>{record.status ? '禁用' : '启用'}</Button>
}
const BanAGQL = GQL({
  mutation: gql`
    mutation handleStaff($staffId: Int!,$method: StaffStatus!){
      handleStaff(staffId: $staffId,method: $method){
        status
        message
      }
    }
  `,
  name: 'handleStaff'
})(Ban)
function ban (record, handleStaff, refetch) {
  const { staffId } = record
  const { status } = record
  let isBanText = status ? '禁用' : '启用'
  Modal.confirm({
    title: '系统提示',
    content: `确定${isBanText}该员工信息?`,
    okText: '确认',
    cancelText: '取消',
    onOk () {
      handleStaff({ variables: { staffId: parseInt(staffId), method: status ? 'disable' : 'enable' } }).then(res => {
        message.success(res.data.handleStaff.message)
        refetch()
      }).catch(err => console.log(err))
    }
  })
}
function EmployeeAcount ({ loading, data, refetch, employeeAcount, dispatch }) {
  // 获取员工账号数据
  // console.log(data)
  const { stafflist = {} } = data
  // console.log(stafflist)
  const { list = [] } = stafflist

  // 定义表格列属性
  const colums = [{
    title: '',
    dataIndex: 'index',
    width: 50,
    render: (text, render, index) => index + 1
  },
  {
    title: '登录账号',
    dataIndex: 'accountsName',
    key: 'acount',
    render: (text, record, index) => {
      return (<span>
        <Link to='/employeeAcount/addEmployee' style={{ color: '#333' }} title={text} >{text}</Link>
        <br />{ record.status ? '' : <Tag color='red'>禁用</Tag>}</span>)
    }
  },
  {
    title: '身份',
    dataIndex: 'groupName'
  },
  {
    title: '姓名',
    dataIndex: 'staffName',
    render: text => <span title={text} > { text } </span>
  },
  {
    title: '职位',
    dataIndex: 'title',
    render: text => <span title={text} > { text } </span>
  },
  {
    title: '部门',
    dataIndex: 'branchName'
  },
  {
    title: '企业微信号',
    dataIndex: 'weChat',
    render: text => <span title={text} > { text } </span>
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '角色',
    dataIndex: 'role',
    render: text => <span title={text} > { text } </span>
  },
  {
    title: '邀请码',
    dataIndex: 'inviteCode'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    render: (remark, record, index) => {
      return (<span>{employeeAcount.remarkBtn ? (<span>
        <Link to={`/employeeAcount/addEmployee/${record.accountsId}`}>编辑</Link>
        <Divider type='vertical' />
        <BanAGQL record={record} refetch={refetch} />
      </span>) : remark}</span>)
    }
  }
  ]
  // 指定改变每页显示条目数
  function onShowSizeChange (current, pageSize) {
    refetch({
      page: current,
      pageSize: pageSize
    })
  }
  // 获取指定页的数据
  function onChange (page, pageSize) {
    refetch({
      page: page,
      pageSize: pageSize
    })
  }
  // 定义搜索关键字
  function onSearch (e) {
    refetch({
      kw: e.target.value
    })
  }
  // 清空筛选
  // function onClear () {
  //   refetch({
  //     page: 1,
  //     pageSize: 30,
  //     kw: ''
  //   })
  // }
  function onselect (value) {
    console.log(value)
    refetch({
      staff_type: value
    })
  }
  return (<div >
    <Header header={headerData} />
    <div className={styles.search} >
      <Input.Search style={{ width: 300 }}
        placeholder='账号/姓名'
        onPressEnter={onSearch}
        onSearch={onSearch}
      />
      <Select defaultValue='身份' style={{ marginLeft: 10, width: 120 }} onChange={onselect}>
        <Option value={0}>全部</Option>
        <Option value='indoorwork'>内勤</Option>
        <Option value='salesman'>业务员</Option>
        <Option value='boss'>老板</Option>
        <Option value='driver'>司机</Option>
      </Select>
      <Select defaultValue='状态' style={{ marginLeft: 10, width: 120 }}>
        <Option value={0}>全部</Option>
        <Option value='enable'>启用</Option>
        <Option value='disable'>禁用</Option>
      </Select>
      <Link to='/employeeAcount/addEmployee'>
        <Button type='primary' onClick={() => dispatch({ type: 'employeeAcount/save', payload: { staff: {} } })} style={{ position: 'absolute', right: 0 }} > 新增员工账号 </Button>
      </Link >
    </div>
    <div className={styles.table} >
      <Table loading={loading}
        pagination={false}
        columns={colums}
        dataSource={list}
      /> </div>
    <div className={styles.footer} >
      <Pagination showSizeChanger pageSizeOptions={['10', '20', '30', '50', '100']}
        showTotal={total => `共${total}条`}
        onShowSizeChange={onShowSizeChange}
        defaultCurrent={1}
        total={stafflist.total}
        onChange={onChange}
      />
    </div>
  </div>
  )
}

EmployeeAcount.propTypes = {
  loading: PropTypes.bool,
  data: PropTypes.object,
  refetch: PropTypes.func,
  employeeAcount: PropTypes.object,
  dispatch: PropTypes.func
}

Ban.propTypes = {
  record: PropTypes.object,
  handleStaff: PropTypes.func,
  refetch: PropTypes.func,
  loading: PropTypes.bool
}

const mapStateToProps = ({ employeeAcount }) => ({ employeeAcount })

export default GQL({
  query: gql`
    query example($page: Int,$pageSize: Int, $kw: String) {
      stafflist(page: $page, pageSize: $pageSize, kw: $kw) {
        page
        pageSize
        total
        list{
          key
          staffId
          accountsId
          accountsName
          groupName
          staffName
          title
          branchName
          mobile
          inviteCode
          remark
          status
          isAdministrator
        }
      }
    }
  `,
  variables: {
    page: 1,
    pageSize: 30,
    kw: '',
    staff_type: 0,
    status: 0
  },
  fetchPolicy: 'no-cache',
  notifyOnNetworkStatusChange: true
})(connect(mapStateToProps)(EmployeeAcount))
